<template>
    <div class="serach-info">
        <waphome v-title="44">
            <span></span>
        </waphome>
        <div class="nav-tab-filter">
            <nav>
                <ul>
                    <li @click="handleShowAll()" :class="index===1?'selete-coloc' : ''">
                        <span>{{goosName}}</span>
                        <van-icon :name="index===1? 'arrow-up':'arrow-down'" />
                    </li>
                    <li @click="handleShowCategory()" :class="index===2?'selete-coloc' : ''">
                        <span>{{categoryNmae}}</span>
                        <van-icon :name="index===2? 'arrow-up':'arrow-down'"  />
                    </li>
                    <li @click="handleShowFunction()" :class="index===3?'selete-coloc' : ''">
                        <span>{{functionNmae}}</span>
                        <van-icon name="arrow-down" />
                    </li>
                    <li @click="handleShowPrice()" :class="index===4?'selete-coloc' : ''">
                        <span>{{priceName}}</span>
                        <van-icon name="arrow-down" />
                    </li>
                </ul>
            </nav>
        </div>
        <div class="goos-all" v-show="isfilterShow">
            <ul class="goos-all-brand" v-if="index === 1">
                <li v-for="(item,index) in newfliterBrandList"
                :key="index"
                @click="handelClickAll(item.name,item.id)"
                :class="item.name === goosName?'active':''">
                    {{item.name}}
                </li>
            </ul>
            <ul class="goos-all-category" v-if="index===2">
                <li v-for="(item,index) in newfilterCategoryList"
                :key="index"
                @click="handelCategory(item.name,item.id)"
                :class="item.name === goosName?'active':''">
                {{item.name}}
                </li>
            </ul>
            <ul class="goos-all-category" v-if="index===3">
                <li v-for="(item,index) in newfilterFunctionList"
                :key="index"
                @click="hanselFunction(item.name,item.id)"
                :class="item.name === goosName?'active':''">
                {{item.name}}
                </li>
            </ul>
            <ul class="goos-all-category" v-if="index===4">
                <li v-for="(item,index) in priceData"
                :key="index"
                @click="handelClickPrice(item)"
                :class="item === goosName?'active':''">
                {{item}}
                </li>
            </ul>
            <!-- 遮罩层 -->
            <van-overlay :show="isfilterShow" @click="isfilterShow = false" />
        </div>

        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
            <div class="information" v-for="(item,index) in fileData" :key="index" @click=detialRoute(item)>
                <div class="goos-img">
                    <img :src="item.image_url_set.dx_image['320']" alt="">
                </div>
                <div class="goos-title">
                    <h4 class="title">{{item.name}}</h4>
                    <p class="price">
                        <span class="jumei_price">{{item.jumei_price | setMoneySign}}</span>
                        <span class="market_price">{{item.market_price | setMoneySign}}</span>
                    </p>
                </div>
            </div>
        </van-list>

        <div class="shopcart" @click="$router.push('/shoppingCartls')">
            <p><van-icon name="bag-o"/></p>
        </div>
        <div class="num">
            <span>0</span>
        </div>

    </div>
</template>
<script>
import waphome from '../Header_home'
export default {
    data () {
        return {
            goosList: [],// 获取的全部数据
            id: '',
            page: 1,
            finished: false,
            loading: false,
            filterListbrand: [],// brand数据
            fliterListcategory: [],// category 数据
            fiterFunctionList: [],// 功效数据
            isfilterShow:false,
            goosName: '全部',
            categoryNmae: '分类',
            functionNmae: '功效',
            priceName: '价格',
            brandId: 0,
            categoryId: 0,
            functionId: 0,
            index: null, // 动态控制class
            obj: {
                name : '全部',
                id: '1',
                index : 'ccc'
            },
            fileData:[], // 使用filter过滤的数据
            priceData: ['全部','1-49','50-99','100-199','200-299','300-399','400-599','600-799','800以上']
        }
    },
    mounted () {
        this.id = this.$route.params.serachid
        console.log(this.$route.params.serachid);
        this.getSearchList()
        this.$store.commit('hide')
    },
    methods: {
        getSearchList(){
            this.axios({
                url: `/api2/search/index?category_id=${this.id}&page=${this.page}&ajax=get`,
                method: 'get'
            }).then(res=>{
                console.log(res.data);
                this.filterListbrand = res.data.data.filter.brand
                this.fliterListcategory = res.data.data.filter.category
                this.fiterFunctionList = res.data.data.filter.function
                console.log(...res.data.data.item_list[0].function_ids);

                if ( res.data.has_more !== '1') {
                    this.goosList.push(...res.data.data.item_list) // 把数组添加进去
                    this.fileData = this.goosList
                    this.finished = false
                    this.loading = false
                    if(this.page=== 25){
                        this.finished = true // 停止触发
                        this.loading = true // 加载完成
                    }

                }else {
                    console.log('异步请求数据有误')
                }
            })
        },
        onLoad () {
            console.log('更新');
            this.page++
            this.getSearchList()
        },
        handelClickAll (name,id) {
            this.goosName = name
            this.isfilterShow = !this.isfilterShow
            this.brandId = id
            console.log(this.brandId);
            if( this.goosName === '全部') {
                this.fileData = this.goosList
            }else{
                this.fileData = this.goosList.filter(item => item.brand_id === (this.brandId))
            }
            this.index = null
        },
        handelCategory (name,id) {
            this.categoryNmae = name
            this.isfilterShow = !this.isfilterShow
            this.categoryId = id
            console.log(this.categoryNmae);
            if( this.categoryNmae === '全部') {
                this.fileData = this.goosList
            }else{
                this.fileData = this.goosList.filter(item => item.name.includes(this.categoryNmae))
            }
            this.index = null
        },
        hanselFunction(name,id) {
            this.functionNmae = name
            this.functionId = id
            console.log(this.functionId);
            this.isfilterShow = !this.isfilterShow
            if( this.functionNmae === '全部') {
                this.fileData = this.goosList
            }else{
                this.fileData = this.goosList.filter(item => item.name.includes(this.functionNmae))
            }
            this.index = null
        },
        handelClickPrice (name) {
            this.priceName = name
            this.isfilterShow = !this.isfilterShow
            if( this.priceName === '全部') {
                this.fileData = this.goosList
            }else{
                var _this = this // 改变this指向
                var arrayData = [] // 定义一个空数组
                // 循环数据价格对比 => 过滤出想要的数据
                this.goosList.forEach(function (item) {
                    var itemName = parseFloat(_this.priceName.split('-')[1]), // 将分割的数组转成number => 获取点击的最高价格
                        itemNum =  parseFloat(_this.priceName.split('-')[0]),/// 获取点击的最小价格
                        num =  Number(item.jumei_price) // 原数据价格
                    if( num < itemName && num > itemNum){ // 原数据价格大于并且小于点击的价格
                      arrayData.push(item)
                    }
                })
                this.fileData = arrayData
            }
        },
        handleShowAll() {
            this.isfilterShow = true
            this.index = 1
            if(this.isfilterShow === false){
                this.index = null
            }
        },
        handleShowCategory() {
            this.isfilterShow = true
            this.index = 2
            if(this.isfilterShow === false){
                this.index = null
            }
        },
        handleShowFunction() {
            this.isfilterShow = true
            this.index = 3
            if(this.isfilterShow === false){
                this.index = null
            }
        },
        handleShowPrice () {
            this.isfilterShow = true
            this.index = 4
            if(this.isfilterShow === false){
                this.index = null
            }
        },
        detialRoute (item) { // 跳转详情页
            this.$router.push({path: '/product/detial', query:{item_id:item.item_id, type: item.type, tid: ''}})
        },
    },
    computed: {
        // 向brand数据结构添加新数据
        newfliterBrandList () {
            // 使用set方法像原数据添加新数据
            var arealist = [this.obj, ...(new Set(this.filterListbrand))]
            return arealist
        },
        newfilterCategoryList () {
            var arealist = [this.obj, ...(new Set(this.fliterListcategory))]
            return arealist
        },
        newfilterFunctionList () {
            var arealist = [this.obj, ...(new Set(this.fiterFunctionList))]
            return arealist
        }
    },
    components: {
        waphome
    },
    destroyed () {
        this.$store.commit('show')
    }
}
</script>
<style lang="scss" scoped>
.serach-info{
    margin-bottom: 50px;
    .information{
        width: 100%;
        height: 117px;
        border-bottom: 1px solid #f4f4f4;
        position: relative;
        z-index: 1;
        .goos-img{
            width: 50%;
            height: 100%;
            margin-left: -20px;
            img{
                width: 100%;
                // height: 100%;
            }
        }
        .goos-title{
            width: 55%;
            height: 100%;
            // height: 117px;
            position: absolute;
            right: 0px;
            padding-right: 20px;
            top: 0;
            background-color: #fff;
            h4{
                margin-top: 20px;
            }
            .price{
                margin-top: 30px;
                .jumei_price{
                    font-size: 18px;
                    color: #fe4070;
                }
                .market_price{
                    font-size: 13px;
                    color: #999;
                    text-decoration: line-through;
                    padding-left: 10px;
                }
            }
        }
    }
    .shopcart{
        width: 40px;
        height: 40px;
        background-color: $e-red;
        position: fixed;
        bottom: 2%;
        left: 4%;
        border-radius: 50%;
        text-align: center;
        z-index: 11;
        p{
            font-size: 32px;
            color: #fff;
        }
    }
    .num{
        width: 18px;
        height: 16px;
        position: fixed;
        bottom: 6%;
        left: 12%;
        background-color: $e-red;
        z-index: 12;
        border-radius: 50%;
        border: 1px solid #f4f4f4;
        line-height: 16px;
        text-align: center;
        span{
            color: #f4f4f4;
        }
    }
    .nav-tab-filter{
        width: 100%;
        height: 44px;
        background-color: #fff;
        line-height: 44px;
        border-top: 1px solid #f4f4f4;
        border-bottom: 1px solid #f4f4f4;
        position: relative;
        z-index: 9999999;
        nav{
            ul{
                display: flex;
                text-align: center;
                .selete-coloc{
                    color:$e-red;
                }
                li{
                    flex: 1;
                    span{
                        font-size: 14px;
                    }
                }
            }
        }
    }
    .goos-all{
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: .5);
        position: relative;
        z-index: 10;
        .goos-all-brand,.goos-all-category{
            display: flex;
            flex-flow: wrap;
            text-align: center;
            max-height: 240px;
            overflow-y: scroll;
            background-color: #fff;
            position: absolute;
            width:100%;
            z-index: 11;
            .active{
            color:$e-red;
            }
            li{
                width: 33%;
                height: 44px;
                line-height: 44px;
                border: 1px solid #f4f4f4;
                border-left: none;
                border-top: none;
            }
            li:nth-child(1),li:nth-child(2),li:nth-child(3){
                border-top: none;
                border-left: none;
            }
        }
    }
}
</style>
